import { FC, useState, useEffect } from 'react'
import { Button, Image } from 'antd'
import {} from 'vue-vis-panel'
import {} from 'jquery'
import axios from 'axios'
// styled-components
import './style.scss'

interface ImageViewProps {
  readonly src: string // read-only 定义属性生效问题
  width?: string
  height?: string
  round?: boolean // 是否改变形状
  onClick?: () => void
}

const ImageView: FC<ImageViewProps> = ({ round, onClick, src }) => {
  // 副作用操作： http请求 定时器 原生事件 dom操作
  const fetchData = async () => {
    const data = await axios.get('http://localhost:3005/list')
    return data
  }

  useEffect(() => {
    fetchData()
    return () => {}
  }, [])

  return (
    <Image
      className={round ? 'image-active' : ''}
      onClick={onClick}
      width={200}
      src={src}
    />
  )
}

export default ImageView
